<template>
  <div class="container">
    <div class="title">404</div>
    <div class="intro">您访问的页面无法找到,{{ second }}秒后自动跳回首页</div>
  </div>
</template>

<script setup lang="ts">
import { onBeforeUnmount, ref } from "vue";
import { useRouter } from "vue-router";
const second = ref(3);
const router = useRouter()
let timer = setInterval(() => {
  second.value--;
  if (second.value === 0) {
    clearInterval(timer);
    router.push({ path: '/' });
  }
}, 1000);

onBeforeUnmount(() => {
  clearInterval(timer);
});

</script>

<style lang="less" scoped>
.container {
  text-align: center;
  width: 100%;

  .title {
    font-size: 96px;
    margin-top: 25vh;
  }

  .intro {
    font-size: 24px;
  }
}
</style>
